<script setup lang="ts">
const userData = [
  {
    id: 1,
    username: 'john_doe',
    password: 'hashed_password_example',
    avatar: 'http://example.com/avatar.jpg',
    nick_name: 'John',
    mobile: '13800138000',
    email: 'john.doe@example.com',
    department: '测试部门',
    position: '测试岗位',
    status: true,
    createTime: '2025-06-07T14:00:00Z',
    updateTime: '2025-06-07T14:00:00Z',
    lastLoginTime: '2025-06-06T08:00:00Z',
  },
  {
    id: 2,
    username: 'jane_smith',
    password: 'hashed_password_example_2',
    avatar: 'http://example.com/avatar2.jpg',
    nick_name: 'Jane',
    mobile: '13900139000',
    email: 'jane.smith@example.com',
    department_id: 1,
    position_id: 4,
    status: false,
    createTime: '2025-06-07T14:00:00Z',
    updateTime: '2025-06-07T14:00:00Z',
    lastLoginTime: '2025-06-06T08:00:00Z',
  },
]
</script>
<template>
  <div class="h-full w-full space-y-4">
    <div class="bg-white rounded-lg shadow-sm pt-4 pl-4">
      <!-- 搜索筛选卡片 -->
      <el-form :inline="true" class="flex flex-wrap">
        <el-form-item label="用户名" class="flex-1 w-60">
          <el-input placeholder="请输入用户名" class="w-full" />
        </el-form-item>
        <el-form-item label="状态" class="flex-1 w-60">
          <el-select placeholder="请选择状态" class="w-full">
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item class="flex items-end">
          <el-button type="primary">
            搜索
          </el-button>
          <el-button>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="bg-white rounded-lg shadow-sm pt-4 pl-4 space-y-4">
      <!-- 表格工具栏 -->
      <div class="flex">
        <el-button> 导出</el-button>
        <el-button> 批量删除</el-button>
      </div>

      <!-- 用户表格 -->
      <el-table class="w-full h-full rounded-lg overflow-hidden" stripe highlight-current-row :data="userData">
        <el-table-column fixed type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="position" label="岗位" width="100">
          <template #default="scope">
            <el-tag>{{ scope.row.position }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column fixed="right" label="操作" width="180">
          <template #default>
            <el-button link type="primary" size="small">
              查看详情
            </el-button>
            <el-button link type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页控件 -->
      <div class="flex flex-col justify-between mt-6">
        <div class="text-sm text-gray-500 mb-4">显示 10 条，共 20 条</div>
        <el-pagination
          :current-page="1"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="20"
          class="flex items-center justify-center sm:justify-end"
        />
      </div>
    </div>
  </div>
</template>

<style scoped></style>
